<template>
  <div>
   
     <van-swipe-cell class="goods-card">
      
      <van-checkbox v-model="checked"></van-checkbox>
     <van-card
        :price="price"
        :title="name"
        :thumb="imgname"
      />
      <van-stepper v-model="value" class="stepper"/>
   
      <template #right>
        <van-button square text="删除" type="danger" class="delete-button" />
      </template>
      
      </van-swipe-cell>
  </div>
</template>

<script>

  export default {
     name: 'Cart',
     props:['price','name','imgname'],
     data() {
      return {
      checked: false,
    };
  },
     methods: {
      
   // position 为关闭时点击的位置
    // instance 为对应的 SwipeCell 实例
    beforeClose({ position, instance }) {
      switch (position) {
        case 'left':
        case 'cell':
        case 'outside':
          instance.close();
          break;
        case 'right':
          Dialog.confirm({
            message: '确定删除吗？',
          }).then(() => {
            instance.close();
          });
          break;
      }
    },
     },
  }
</script>

<style lang="scss" scoped>

.goods-card {
    margin: 0;
    background-color: white;
    //margin-bottom: 20px;
   
  }
  
  .van-checkbox{
    //position: absolute;
    //bottom:70px
    margin: 0 10px;

  }
.stepper{
  //margin-bottom: 20px;
  margin-left: 7.27778rem;
}
  .delete-button {
    height: 100%;
  }
</style>